
import 'package:flutter/material.dart';


// padding  EdgeInsets.all(20) 所有方向都添加20像素的内边距
// EdgeInsets.symmetric(vertical: 20, horizontal: 20) 垂直方向添加20像素的内边距，水平方向添加20像素的内边距
// EdgeInsets.only(top: 20, left: 20, bottom: 20, right: 20) 分别指定上、左、下、右方向的内边距

// row 水平方向添加20像素的内边距 子组件水平方向居中对齐
// Row(
//   mainAxisAlignment: MainAxisAlignment.center,
//   children: [
//     Text('1'),
//     Text('2'),
//     Text('3'),
//   ],
// )

// column 垂直方向添加20像素的内边距 子组件垂直方向居中对齐
// Column(
//   mainAxisAlignment: MainAxisAlignment.center,
//   children: [
//     Text('1'),
//     Text('2'),
//     Text('3'),
//   ],
// )

// flex 水平方向添加20像素的内边距 子组件水平方向居中对齐
// Flex(
//   direction: Axis.horizontal,
//   mainAxisAlignment: MainAxisAlignment.center,
//   children: [
//     Text('1'),
//     Text('2'),
//     Text('3'),
//   ],
// )

class Pad extends StatefulWidget {
  const Pad({super.key});

  @override
  State<Pad> createState() => _PadState();
}

class _PadState extends State<Pad> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('padding_row_column_flex'),
      ),
      body: Column(
        // mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 0;}),
                child: Text('pading'),
              ),
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 1;}),
                child: Text('row'),
              ),
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 2;}),
                child: Text('column'),
              ),
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 3;}),
                child: Text('flex'),
              ),
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 4;}),
                child: Text('dome'),
              ),
            ],
          ),
          _current == 0 
            ? Pading1() 
            : Expanded(
                child: _current == 1 ?  Row1() : _current == 2 ? Column1() : _current == 3 ? Flex1() :Dome() 
              )
          
        ],
      )
    );  
  }
}

class Pading1 extends StatelessWidget {
  const Pading1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Text('padding20'),
      )
    );
  }
}

class Row1 extends StatelessWidget {
  const Row1({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center, // 水平居中 center 居中 start 左对齐 end 右对齐 spaceBetween 均匀分布
      crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中 start 顶部对齐 end 底部对齐
      children: [
        IconContainer(Icons.home, color: Colors.blue,),
        IconContainer(Icons.accessibility, color: Colors.blue,),
        IconContainer(Icons.settings, color: Colors.blue,),
      ],
    );
  }
}
class Column1 extends StatelessWidget {
  const Column1({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center, // 水平居中 center 居中 start 左对齐 end 右对齐 spaceBetween 均匀分布
      crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中 start 顶部对齐 end 底部对齐
      children: [
        IconContainer(Icons.home, color: Colors.blue,),
        IconContainer(Icons.accessibility, color: Colors.blue,),
        IconContainer(Icons.settings, color: Colors.blue,),
      ],
    );
  }
}
class Flex1 extends StatelessWidget {
  const Flex1({super.key});

  @override
  Widget build(BuildContext context) {
    // return Row(
    return Flex(
      direction: Axis.horizontal, // horizontal 
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home, color: Colors.blue,),
        ),
        SizedBox(width: 10,),
        Expanded(
          flex: 2,
          child: IconContainer(Icons.accessibility, color: Colors.blue,),
        ),
      ],
    );
  }
}

class Dome extends StatelessWidget {
  const Dome({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          height: 120,
          width: double.infinity,
          color: Colors.blue,
        ),
        Row(
          children: [
            Expanded(
              flex: 2,
              child: Image.network('https://www.itying.com/images/flutter/1.png', height: 180, fit: BoxFit.cover,),
            ),
            SizedBox(width: 10,),
            Expanded(
              flex: 1,
              child: SizedBox(
                height: 180,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: SizedBox(
                        width: double.infinity,
                        child: Image.network('https://www.itying.com/images/flutter/2.png', fit: BoxFit.cover,),
                      ),
                    ),
                    SizedBox(height: 10,),
                    Expanded(
                      flex: 1,
                      child: SizedBox(
                        width: double.infinity,
                        child: Image.network('https://www.itying.com/images/flutter/3.png', fit: BoxFit.cover,),
                      ),
                    ),
                  ],
                )
              ),
              
            ),
            
          ],
        ),
      ],
    );
  }
}


class IconContainer extends StatelessWidget {
  final Color color;
  final IconData icon;
  const IconContainer(this.icon,{super.key,required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 120,
      width: 120,
      color: color,
      child: Icon(icon, color: Colors.white,size: 28,),
    );
  }
}